<template>
  <view class="container">
	  <!-- <CustomNavbar title="我的订单"></CustomNavbar> -->
    <!-- 订单状态选项卡 -->
	<view class="tabs">
		<up-tabs
		     :list="tabList"
		     lineWidth="40rpx"
		     lineColor="#FD3832"
			fontSize="26rpx"
		    :activeStyle="{
		         color: '#0E1527',
		         fontWeight: 'bold',
				 fonstSize:'28rpx'
		        
		     }"
		     :inactiveStyle="{
		         color: '#0E1527',
		        
		     }"
		     itemStyle="padding-left: 27rpx; padding-right: 22rpx; height:106rpx; "
			 :current="currentTab"
			 @change="handleTabChange"
		    >
		  </up-tabs>
	</view>
    <!-- 搜索框 -->
    <!-- <view class="search-box">
      <up-search
        placeholder="请输入关键字或者订单号搜索"
        v-model="searchKeyword"
        :showAction="false"
        bgColor="#fff"
        shape="square"p
        height="36"
        @search="handleSearch"
      ></up-search>
    </view> -->

    <!-- 订单列表 -->
	<scroll-view scroll-y class="order-list" @scrolltolower="loadMore"
				:lower-threshold="100">
		<view class="list" v-for="(item,index) in orderList" :key="index" @click="goPages(item.id)">
			<view class="head flex-between">
				<text>下单时间：{{item.createtime}}</text>
				<text class="status">{{item.status_text}}</text>
			</view>
			<view class="goods flex-between">
				<image :src="item.goods_image" mode="widthFix"></image>
				<view class="goods-detail">
					<h4>{{item.goods_name}}</h4>
					<view class="num">
						<text class="num">{{item.goods_sku}}</text>
					</view>
					<view class="flex-between">
						<view class="price-box">
							<text>￥</text>
							<text class="price">{{item.goods_price}}</text>
						</view>
						<text>X{{item.order_num}}</text>
					</view>
				</view>
			</view>
			<view class="amount-box">
				<text>共{{item.order_num}}件商品</text>
				<view class="price">
					<text>合计</text>
					¥<text class="amount">{{item.order_amount}}</text>
				</view>
			</view>
			<view class="btns">
				<button v-if="item.status==0 || item.status==1" @click.stop="goPages(item.id)">取消订单</button>
				<button v-if="item.status==0" class="pay" @click.stop="goPay(item.id)">去支付</button>
				<button v-if="item.status==1" @click.stop="goPages(item.id)">申请退款</button>
				<button v-if="item.status==2" @click.stop="goPages(item.id)">确认收货</button>
				<button v-if="item.status==3" @click.stop="goPages(item.id)">已完成</button>
				<button v-if="item.status==4" @click.stop="goPages(item.id)">查看进度</button>
			</view>
		</view>
	<!-- 加载状态提示 -->
	<u-loadmore
		:status="loadStatus"
	    :loading-text="loadingText" 
	    :loadmore-text="loadmoreText" 
	    :nomore-text="nomoreText"
		marginTop="72rpx"
		color="#999"
		lineColor="#D9DCE2"
		line
		lineWidth="99rpx"
	 />
	</scroll-view >
	
  </view>
</template>

<script setup>
import { ref ,onMounted, reactive } from 'vue';
import CustomNavbar from '@/components/CustomNavbar.vue';
import {onLoad,onShow} from '@dcloudio/uni-app'

// 选项卡数据
const tabList = ref([
  { name: '全部' },
  { name: '待支付' },
  { name: '待发货' },
  { name: '待收货' },
  { name: '已完成' },
  { name: '售后' }
]);

const currentTab = ref(0); // 当前选中标签索引

const searchKeyword = ref(''); // 搜索关键词
// 切换选项卡
const handleTabChange = (e) => {
	
  currentTab.value = e.index;
  getListData()
  // 这里可以添加加载对应标签数据的逻辑
  // orderList.value = [...orderList.value.filter(item=>{item.status===currentTab.value})]
};

// 处理搜索
const handleSearch = (value) => {
  console.log('搜索关键词:', value);
  // 这里可以添加搜索逻辑
};
// 列表数据
const orderList = ref([])
// 当前页码
const currentPage = ref(1)
// 是否正在加载
const loading = ref(false)
// 加载状态提示
const loadingText = ref('努力加载中');  
const loadmoreText = ref('滑动加载更多');  
const nomoreText = ref('实在没有了'); 
// 是否还有更多数据
const hasMore = ref(true)
// 滚动区域高度
const scrollHeight = ref(0)
// 加载状态
const loadStatus = ref('loadmore')


// 获取列表数据
const getListData = async (page = 1) => {
  try {
    loading.value = true
    loadStatus.value = 'loading'
    
    // 模拟接口请求
    uni.$api.order.orderList({
		status: currentTab.value < 1 ? 'all' : currentTab.value-1,
		page
	}).then(res => {
		if (page === 1) orderList.value = []
		// orderList.value = [...orderList.value.filter(item=>{item.status===currentTab.value})]
		// console.log(currentTab.value)
		orderList.value = [...orderList.value, ...res.data.data]
		hasMore.value = res.data.last_page > res.data.current_page
		loadStatus.value = hasMore.value ? 'loadmore' : 'nomore'
	})
    
    
  } finally {
    loading.value = false
  }
}


// 加载更多
const loadMore = () => {
  if (!loading.value && hasMore.value) {
    currentPage.value++
    getListData(currentPage.value)
  }
}

// 初始化加载
onMounted(() => {
  // 计算滚动高度（根据你的页面布局调整）
  scrollHeight.value = uni.getSystemInfoSync().windowHeight - 50
})
onLoad((optiops)=>{
	currentTab.value = Number(optiops.status) || 0
	
})
onShow(() => {
  getListData(1)
})

// 去支付
const goPay =(oid)=>{
	uni.navigateTo({
		url:'/orderPages/pages/order/pay-order?order_id=' + oid
	})
}
const goPages = (oid)=>{
	uni.navigateTo({
		url:`/orderPages/pages/order/order-details?id=${oid}`
	})
}
</script>

<style lang="scss" scoped>
.container {
  background: url('/static/index_slices/index_bg.png') no-repeat;
  background-size: 100% auto;
  padding-top: 8rpx;
  padding-bottom: 20rpx;
  // 切换
  .tabs{
	  
	  background-color: #fff;
	  border-radius: 26rpx;
	  margin: 20rpx;
	  ::v-deep .u-tabs__wrapper__nav__line{
		  bottom: 21rpx;
	  }
  }
}

// 搜索
.search-box {
  // margin-top: 30rpx;
  margin: 20rpx ;
  // 调整搜索框圆角
  ::v-deep .u-search__content {
    border-radius: 26rpx !important;
	background-color: #FFFFFF !important;
	height: 78rpx;
  }
  
}

// 订单详情
.order-list{
		height: calc(100vh - 130px);
	.list{
		background-color: #fff;
		border-radius: 16rpx;
		margin:  20rpx;
		padding: 30rpx;
		font-size: 22rpx;
		color: #999;
		box-shadow: 12rpx 6rpx 18rpx 4rpx rgba(51, 51, 51, 0.05);
		// text-align: right;
		.head{
			color: #0D182E;
			font-size: 24rpx;
			padding-bottom: 33rpx;
			border-bottom: 1rpx solid #F3F6FA;
			margin-bottom: 27rpx;
			.status{
				color: #42485A;
				font-size: 26rpx;
			}
				
		}
		// 商品信息
		.goods{
			margin-bottom: 30rpx;
			image{
				width: 160rpx;
				border-radius: 10rpx;
				margin-right: 24rpx;
			}
			.goods-detail{
				
				h4{
					width: 468rpx;
					font-size: 26rpx;
					color: #000000;
					font-weight: normal;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.num{
					padding-top: 28rpx;
					margin-bottom: 45rpx;
				}
				.price-box{
					font-size: 24rpx;
					color: #DD3A22;
					font-weight: bold;
				}
				.price{
					font-size: 28rpx
					
				}
			}
		}
		// 合计
		.amount-box{
			border-top: 1rpx solid #F3F6FA;
			padding-top: 24rpx;
			display: flex;
			justify-content: flex-end;
			color: #42485A;
			font-size: 26rpx;
			.price{
				padding-left: 20rpx;
				.amount{
					color: #262A35;
					font-size: 28rpx;
					font-weight:bolder;
					
				}
			}
		}
		.btns{
			text-align: right;
			
			button{
				padding: 0;
				margin-top: 27rpx;
				margin-left: 11rpx;
				display: inline-block;
				width: 140rpx;
				height: 58rpx;
				line-height: 58rpx;
				border-radius: 29rpx;
				color: #5E646C;
				font-size: 24rpx;
				background-color: #fff;
				border:1rpx solid #D2D5DB;
				&.pay{
					border-color: #FF3A3A;
					color: #FF3A3A;
				}
			}
		}
	}
	
}
	
</style>